<template>
  <div>
    <el-card class="top">
      <el-button type="primary" @click="add">添加权限</el-button>
    </el-card>
    <el-card>
      <el-table
      :data="tableData"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children',hasChildren: 'hasChildren'}">
      <el-table-column
      label="名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="标识"
      prop="code">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="description">
    </el-table-column>
    <el-table-column
      label="操作"
     >
     <!-- v-if="scope.row.children.pid" -->
     <template slot-scope="scope">
      
     <span
   
      v-if=" scope.row.pid !=0"
    ></span>
      <el-button
      size="mini"
<<<<<<< HEAD
      type="info"
=======
      type="primary"
>>>>>>> limit
     v-else
      @click="handleAdd(scope.$index, scope.row)">添加</el-button>
      <el-button
        size="mini"
        type='warning'
        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      <el-button
        size="mini"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
    </el-table-column>
    </el-table>
    </el-card>
  
   <!-- 添加权限对话框 -->
   <!-- 添加权限 -->
  <Dialog
   @cnacel='addcnacel'
   @confirm='addconfirm'
   :searchData="authgroupForm"
   :searchForm="searchForm"
   :show.sync="adddialogVisible"
    title='添加权限'
    
   ></Dialog>
<!-- 编辑权限 -->
<Dialog
@cnacel='Editcnacel'
@confirm='Editconfirm'
@switchChang="switchChang"
:searchData="authgroupForm"
:searchForm="searchForm"
:show.sync="EditdialogVisible"
 title='修改权限'

 
></Dialog>
<<<<<<< HEAD
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
 >
</el-switch>
=======

>>>>>>> limit
<!-- 分配权限 -->
<el-dialog
  title="提示"
  :visible.sync="sharedialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="sharedialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sharedialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 祖先添加权限 -->
  <!-- 添加权限 -->
  <Dialog
   @cnacel='addFathercnacel'
   @confirm='addFatherconfirm'
   :searchData="limitForm"
   :searchForm="FathersearchForm"
   :show.sync="addFatherdialogVisible"
    title='添加权限'
    
   ></Dialog>
  </div>
  
  </template>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .top{
    margin-bottom: 20px;
  }
</style>

<script>
import arrayToTree from "array-to-tree";
import {permission,Dellimit,Addlimit,Editlimit} from '@/api/http'
import Dialog from '@/components/global/Dialog.vue'
  export default {
    components:{Dialog},
    data() {
      return {
        value: true,
        tableData: [],
        adddialogVisible:false,
        EditdialogVisible:false,
        sharedialogVisible:false,
        addFatherdialogVisible:false,
        authgroupForm: {
          name:'',
          code:'',
          description:'',
          type:1,
          pid:'0',
          enVisible:'0'
        },
        searchForm: [
        {
          type: "Input",
          label: "权限名称",
          prop: "name",
          width: "120px",
          // disabled: true,
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "权限标识",
          prop: "code",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "权限描述",
          prop: "description",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "switch",
          label: "开启",
          prop: "enVisible",
          width: "120px",
          isFormItemShow: true
        },
      ],
      limitForm:{
          name:'',
          code:'',
          description:'',
          type:2,
          pid:'',
          enVisible:'0'
     
      },
      FathersearchForm: [
        {
          type: "Input",
          label: "权限名称",
          prop: "name",
          width: "120px",
          // disabled: true,
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "权限标识",
          prop: "code",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "权限描述",
          prop: "description",
          width: "120px",
          isFormItemShow: true
        },
       
      ],
      }
    },
    methods: {
      async  permission(){
            const {data:res} = await permission() 
            console.log(res)
         this.tableData =  res.data
         console.log(' this.tableData ', this.tableData )
         this.tableData = arrayToTree(this.tableData, {
          parentProperty: "pid",
          customID: "id",
          childrenProperty: "children",
    });
    console.log(this.tableData)
    
       
      
},
add(){
console.log('add')
this.adddialogVisible = true


},
handleAdd(index, row){
  console.log('handleAdd',index, row)
  this.addFatherdialogVisible = true
  this.limitForm.pid = row.id

},
addFathercnacel(){
  this.addFatherdialogVisible = false
},
async addFatherconfirm(){
  console.log('sure')
  const {data :res} = await Addlimit (this.limitForm)
      // ordersForm 为表单绑定的:model值， 'address'的绑定input名称，第三项为值
     
      console.log('addconfirm',res)
      if(res.code ===10000){
      this.$message.success(res.message)
      this.adddialogVisible = false
      this.permission()
    }
    else{
      this.$message.error(res.message)
    }
},
handleEdit(index, row){
  console.log('handleEdit',index, row,'pid:',row.pid)
  this.authgroupForm = row
  this.EditdialogVisible = true

},
 async handleDelete(index, row){
  console.log('handleDelete',index, row)
  const {data: res}= await Dellimit(row.id)
  console.log(res)
  if(res.code ===10000){
      this.$message.success('删除角色成功')
      this.permission()
    }
    else{
      this.$message.error('删除角色失败')
    }
},
  // 关闭添加弹框
  addcnacel(){
        this.adddialogVisible = false
        console.log('EditdialogVisible')
      },
      // 添加确认按钮
     async addconfirm(){
   
  
      const {data :res} = await Addlimit (this.authgroupForm)
      // ordersForm 为表单绑定的:model值， 'address'的绑定input名称，第三项为值
     
      console.log('addconfirm',res)
      if(res.code ===10000){
      this.$message.success(res.message)
      this.adddialogVisible = false
      this.permission()
    }
    else{
      this.$message.error(res.message)
    }

      
      },

// switchChang
switchChang(val){
  console.log('点击之后',val)
  this.authgroupForm.enVisible = Number(val)
  console.log(this.authgroupForm.enVisible)
},
Editcnacel(){
  this.EditdialogVisible = false
},
Editconfirm(){
  
},

    },
    created() {
      this.permission() 
    },
  }
</script>
<style scoped>
  .el-table{
    min-width: 1000px;
  }
</style>